<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item><a href="/">驿站管理</a></el-breadcrumb-item>
		</el-breadcrumb>
		<el-form ref="form" :inline="true" style="margin-top: 20px;">
			<el-form-item label="驿站名称">
				<el-input v-model="post.courierStationName" placeholder="请输入内容" size="small"
					style="width: 200px;margin-right: 10px;" clearable></el-input>
			</el-form-item>
			<el-form-item label="小区名称">
				<el-input v-model="post.communityName" placeholder="请输入内容" size="small"
					style="width: 200px;margin-right: 10px;" clearable></el-input>
			</el-form-item>
			<el-form-item label="提交日期">
				<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange" size="small"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" style="margin-left: 10px;"
					@click="querySearchCourierStationList">搜索</el-button>
			</el-form-item><br />
			<el-form-item>
				<el-button size="small" type="primary" style="margin-left: 10px;" @click="addPost">新增驿站</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格 -->
		<template>
			<el-table :data="postList" style="width: 100%" border :header-cell-style="{backgroundColor:'#eee'}">
				<el-table-column prop="courierStationId" label="ID">
				</el-table-column>
				<el-table-column prop="courierStationName" label="驿站名字">
				</el-table-column>
				<el-table-column prop="courierStationImage" label="驿站照片">
				</el-table-column>
				<el-table-column prop="courierStationAddress" label="驿站地址">
					<template slot-scope="scope">
						{{postAddress(scope.row)}}
					</template>
				</el-table-column>
				<el-table-column prop="courierStationCommunityName" label="所在小区">
				</el-table-column>
				<el-table-column prop="courierStationOrderCount" label="订单总数">
				</el-table-column>
				<el-table-column prop="addTime" label="添加时间">
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<el-tag type="success" v-show="scope.row.courierStationStatus==1">已上架</el-tag>
						<el-tag type="danger" v-show="scope.row.courierStationStatus==0">已下架</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-link :underline="false" type="primary" style="font-size: 12px;margin-right: 10px;"
							@click="edit(scope.row)">修改</el-link><br />
						<el-link :underline="false" type="primary" style="font-size: 12px;"
							v-show="scope.row.courierStationStatus==0"
							@click="sg(scope.row.courierStationId)">立即上架</el-link>
						<el-link :underline="false" type="primary" style="font-size: 12px;"
							v-show="scope.row.courierStationStatus==1"
							@click="xg(scope.row.courierStationId)">立即下架</el-link>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="post.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="post.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<!-- 对话框 -->
		<el-dialog :title="title" :visible.sync="show" @close="concel">
			<el-form :model="postData">
				<el-form-item label="驿站名字" label-width="120px">
					<el-input v-model="postData.courierStationName" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="所属地区" label-width="120px">
					<el-cascader v-model="address" :options="city">
					</el-cascader>
				</el-form-item>
				<el-form-item label="详细地址" label-width="120px">
					<el-input v-model="postData.courierStationAddress" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="所在小区" label-width="120px">
					<template>
				  <el-select v-model="value" placeholder="请选择">
				    <el-option
				      v-for="item in options"
				      :key="item.communityId"
				      :label="item.communityName"
				      :value="item.communityId">
				    </el-option>
				  </el-select>
				</template>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="concel">取 消</el-button>
				<el-button type="primary" @click="sure">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				options: [],
				value: '',
				queryInfo:{
					communityId:"",
					communityName:"",
					pageSize:50
				},
				
				post: {
					courierStationName: '',
					communityName: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 5,
				},
				date: [],
				postList: [],
				total: 1,
				postData: {
					courierStationAddress: "", //地址
					courierStationCity: "", //市
					courierStationCommunityId: '', //id
					courierStationDistrict: "", //区
					courierStationImage: "", //照片
					courierStationName: "", //名字
					courierStationProvince: "", //省
				},
				address: [],
				show: false,
				title: '',
				city: citys
			}
		},
		methods: {
			//显示完整的地址
			postAddress(row){
				return[
					row.courierStationProvince,
					row.courierStationCity,
					row.courierStationDistrict,
					row.courierStationAddress,
				].join("")
			},
			//下架
			xg(id){
				this.$http.post('courierStation/modifyCourierStation', {
						courierStationId: id,
						courierStationStatus: 0
					})
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success('下架成功！')
							this.querySearchCourierStationList()
						}
					})
			},
			//上架
			sg(id) {
				this.$http.post('courierStation/modifyCourierStation', {
						courierStationId: id,
						courierStationStatus: 1
					})
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success('上架成功！')
							this.querySearchCourierStationList()
						}
					})
			},
			//修改
			edit(row) {
				this.show = true
				this.postData = row
				this.title = '编辑驿站信息'
				this.address = [
							this.postData.courierStationProvince, 
							this.postData.courierStationCity, 
							this.postData.courierStationDistrict
				]
			},
			//取消
			concel() {
				this.postData = {
					courierStationAddress: "", //地址
					courierStationCity: "", //市
					courierStationCommunityId: '', //id
					courierStationDistrict: "", //区
					courierStationImage: "", //照片
					courierStationName: "", //名字
					courierStationProvince: "", //省
				}
				this.address = []
				this.show = false
			},
			//确定
			sure() {
				if (this.title == '添加驿站') {
					this.$http.post('courierStation/addCourierStation', this.postData)
						.then(res => {
							if (res.data.status == 200) {
								this.$message.success('添加成功！')
								this.querySearchCourierStationList()
								this.show = false
							} else {
								this.$message.error('添加失败')
							}
						})
						.catch(error => {
							this.$message.error('服务器异常')
						})
				} else if (this.title == '编辑驿站信息') {
					this.$http.post('courierStation/modifyCourierStation', this.postData)
						.then(res => {
							if (res.data.status == 200) {
								this.$message.success('修改成功！')
								this.querySearchCourierStationList()
								this.show = false
							} else {
								this.$message.error('修改失败')
							}
						})
						.catch(error => {
							this.$message.error('服务器异常')
						})
				}
			},
			//打开增加对话框
			addPost() {
				this.show = true
				this.title = '添加驿站'
			},
			querySearchCourierStationList() {
				this.$http.get('courierStation/querySearchCourierStationList', {
						params: this.post
					})
					.then(res => {
						if (res.data.status == 200) {
							this.postList = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message.error('服务器异常接口！')
						}
					})
					.catch(error => {
						this.$message.error('服务器异常！')
					})
					this.$http.get('community/communityList', {
							//直接用queryInfo中的属性
							params: this.queryInfo
						})
						.then(res => {
							if (res.data.status == 200) { 
								//将list的值直接赋给optios
								this.options=res.data.data.list
							} else {
								this.$message.error('服务器异常接口！')
							}
						})
						.catch(error => {
							this.$message.error("服务器异常！")
						})
			},
			handleSizeChange(val) {
				this.post.pageSize = val;
				this.post.pageNum = 1
				this.querySearchCourierStationList()
			},
			handleCurrentChange(val) {
				this.post.pageNum = val;
				this.querySearchCourierStationList()
			}

		},
		watch: {
			date() {
				if (this.date) { //判断date是否存在
					this.post.startTime = this.date[0];
					this.post.endTime = this.date[1];
				} else {
					this.post.startTime = ''
					this.post.endTime = ''
				}
			},
			address(){
				this.post.courierStationProvince = this.address[0]
				this.post.courierStationCity = this.address[1]
				this.post.courierStationDistrict = this.address[2]
			}
		},
		mounted() {
			this.querySearchCourierStationList()
		}
	}
</script>

<style>
</style>